<template>
  <ContentWrap title="常用功能">
    <el-row>
      <el-col
        v-for="menu in menuList"
        :key="menu.name"
        class="mb-10px"
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="6"
      >
        <div
          class="flex flex-col h-90px cursor-pointer items-center justify-center gap-2"
          @click="handleMenuClick(menu.routerName)"
        >
          <div
            :class="menu.bgColor"
            class="h-48px w-48px flex items-center justify-center rounded text-white"
          >
            <Icon :icon="menu.icon" class="text-7.5!" />
          </div>
          <span>{{ menu.name }}</span>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
/** 快捷入口卡片 */

defineOptions({ name: 'ShortcutCard' })

const router = useRouter() // 路由

/** 菜单列表 */
const menuList = [
  { name: '经营报表', icon: 'ep:user-filled', bgColor: 'bg-red-400', routerName: 'MemberUser' },
  {
    name: '商城首页',
    icon: 'fluent-mdl2:product',
    bgColor: 'bg-orange-400',
    routerName: 'ProductSpu'
  },
  { name: '订单管理', icon: 'ep:list', bgColor: 'bg-yellow-500', routerName: 'TradeOrder' },
  {
    name: '会员管理',
    icon: 'ri:refund-2-line',
    bgColor: 'bg-green-600',
    routerName: 'TradeAfterSale'
  },
  {
    name: '分销管理',
    icon: 'fa-solid:project-diagram',
    bgColor: 'bg-cyan-500',
    routerName: 'TradeBrokerageUser'
  },
  {
    name: '代金券管理',
    icon: 'ep:ticket',
    bgColor: 'bg-blue-500',
    routerName: 'PromotionCoupon'
  },
  {
    name: '库存查询',
    icon: 'fa:group',
    bgColor: 'bg-purple-500',
    routerName: 'PromotionBargainActivity'
  },
  {
    name: '群发短信',
    icon: 'fa:group',
    bgColor: 'bg-purple-500',
    routerName: 'PromotionBargainActivity'
  }
]

/**
 * 跳转到菜单对应页面
 *
 * @param routerName 路由页面组件的名称
 */
const handleMenuClick = (routerName: string) => {
  router.push({ name: routerName })
}
</script>
